render props pattern

子がなんであるかを意識する必要がない

親にそういう責務をもたせたくない場合に使えばいい

普通に子に持った場合は、その子に渡すPropsを親が知っている必要が出てくる

使うべき点、指標をまとめておきたいmrsekut.icon

あるあるなのは<List/>とか

code:ts

<DataProvider render={data => (

<h1>Hello {data.target}</h1>

)}/>

こういうやつ

Childrenに値を渡す

こういう親に対して、

code:ts

const Parent: React.FC<{ children: (value: boolean) => React.ReactNode }> = ({

children,

}) => {

const value, setValue = useState(false);

return (

<div>

{children(value)}

<button onClick={() => setValue(p => !p)}>click</button>

</div>

);

};

こう使う

code:ts

{value => <Child value={value} />

</Parent>